<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-radio"
		:class="_classes"
		:style="_styles"
		:hover-class="hoverClass"
		@tap="_handleClick"
	>
		<view class="pure-radio__box">
			<view class="pure-radio__icon">
				<pure-icon :name="iconName || PureRadioGroupIconName"></pure-icon>
			</view>
		</view>
		<view
			class="pure-radio__label"
			v-if="label || $slots.default"
		>
			<slot>{{ label }}</slot>
		</view>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, inject, useAttrs } from "vue";
	import props from "./props";
	import { getThemeValue } from "../../utils";

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Injects
	// PureRadioGroup 选中值
	const PureRadioGroupModelValue = inject("PureRadioGroupModelValue", ref(null));
	// PureRadioGroup 更新方法
	const PureRadioGroupUpdateFn = inject("PureRadioGroupUpdateFn", () => {});
	// 表单项 Change 事件
	const PureFormItemOnChange = inject("PureFormItemOnChange", null);
	// PureRadioGroup 主题
	const PureRadioGroupTheme = inject("PureRadioGroupTheme", ref(""));
	// PureRadioGroup 幽灵样式
	const PureRadioGroupGhost = inject("PureRadioGroupGhost", ref(false));
	// PureRadioGroup 镂空
	const PureRadioGroupPlain = inject("PureRadioGroupPlain", ref(false));
	// PureRadioGroup 方形框
	const PureRadioGroupSquare = inject("PureRadioGroupSquare", ref(false));
	// PureRadioGroup 图标颜色
	const PureRadioGroupIconColor = inject("PureRadioGroupIconColor", ref(""));
	// PureRadioGroup 图标
	const PureRadioGroupIconName = inject("PureRadioGroupIconName", ref(""));
	// PureRadioGroup 选项卡模式
	const PureRadioGroupTabs = inject("PureRadioGroupTabs", ref(false));

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["update:modelValue", "onClick"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 主题
		if (_props.theme || PureRadioGroupTheme.value)
			array.push(`pure-radio--theme pure-radio--theme-${_props.theme || PureRadioGroupTheme.value}`);

		// 幽灵样式
		if (_props.ghost || PureRadioGroupGhost.value) array.push(`pure-radio--ghost`);

		// 镂空
		if (_props.plain || PureRadioGroupPlain.value) array.push(`pure-radio--plain`);

		// 方形框
		if (_props.square || PureRadioGroupSquare.value) array.push(`pure-radio--square`);

		// 选中
		if (_checked.value) array.push("pure-radio--checked");

		// 只读
		if (_props.readonly) array.push("pure-radio--readonly");

		// 禁用
		if (_props.disabled) array.push("pure-radio--disabled");

		// 是否单独占用一行
		if (_props.block) array.push("pure-radio--block");

		// 标签在前，勾选框在后
		if (_props.reverse) array.push("pure-radio--reverse");

		// 选项卡模式
		if (PureRadioGroupTabs.value) array.push(`pure-radio--tab`);

		return array;
	});

	// **************************************************************************************************************
	// * Styles
	// **************************************************************************************************************
	const _styles = computed(() => {
		const array = [];

		// 主题
		if (_props.theme) array.push(`--pure-radio-theme: ${getThemeValue(_props.theme)}`);

		// 框框尺寸
		if (_props.size) array.push(`--pure-radio-box-size: ${_props.size}`);

		// 默认颜色
		if (_props.defaultColor) array.push(`--pure-radio-box-background: ${_props.defaultColor}`);

		// 激活时的颜色
		if (_props.activeColor) array.push(`--pure-radio-checked-box-background: ${_props.activeColor}`);

		// 图标颜色
		if (_props.iconColor) array.push(`--pure-radio-icon-color: ${_props.iconColor}`);

		return array;
	});

	// 选中状态
	const _checked = computed(() => {
		// 单独使用
		if (_props.alone) return _props.modelValue;
		return PureRadioGroupModelValue?.value === _props?.value;
	});

	// 点击事件
	function _handleClick() {
		_emits("onClick", _props.value);

		// 单独使用
		if (_props.alone) {
			_emits("update:modelValue", !_props.modelValue);

			// 向表单项提交 change 事件
			PureFormItemOnChange?.();
			return;
		}

		// 非单独使用
		PureRadioGroupUpdateFn(_props.value);
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
